% !Mode:: "TeX:UTF-8"

\chapter{饿了么Servlet项目}
本项目为《软件工程综合实践》的第三个项目。要求开发基于Servlet + Vue的前后端分离项目。
项目中的前端部分使用项目二设计的前端页面进行开发，后端部分设计一个基于Servlet的HTTP
服务器，分析HTTP请求，访问数据库并把数据封装为HTTP响应返回给前端。
\section{需求分析}


\subsection{简介}

本项目是《软件工程综合实践》课程的第三个项目。根据智慧树平台上的项目任务书，我们
需要开发一个Java Web项目，外卖点餐平台的“点餐业务线”的整体流程。项目要求实现一个
网页前端和一个后端服务器，采用前后端分离式的分工开发。项目的规模与规模相较于前两个
项目也是有很大的提升。为了更好的协同合作，进行高效率的分工开发，做好需求分析至关重要。

\subsubsection{背景}\label{subsection:PR3beijing}
众所周知，外卖平台上的业务的运作主要主要设计到这些角色：
\begin{enumerate}[label={(\arabic*)}]
    \item 用户：消费者，在平台上选择商家和该商家的食品并下单付款，最终收到骑手送来的
    食品
    \item 商家：生产者，在平台上管理自己的店铺和食品信息，接受客户发来的订单并制作食品，
    等待骑手前来取餐(或自行配送)。最终获取客户付的钱款的一部分
    \item 骑手：负责将食品从商家配送至客户，本项目中假设商家自行雇人配送
    \item 平台管理员：负责与商家交涉，在平台数据库中添加和删除商家
\end{enumerate}
在项目一中，我们是实现了商家和平台管理员的管理业务，即商家管理其店铺信息和食品，平台管理员
管理商家。

在此项目中我们将目光聚焦于用户这一个角色，完成其点餐的整个过程的实现。



\subsubsection{约束}
本项目因为是课程教学项目，所以对编程语言、平台和工具都有一定的要求，结合上文中给关于项目功能方面
的要求，本项目应该具有以下约束：
\begin{itemize}
    \item 数据库使用MySQL数据库
    \item 后端使用JAVASE 1.8作编程语言，前端使用HTML5和VueCli
    \item 使用JDBC(mysql-connector-java)实现数据库的管理
    \item 后端使用Apache Tomcat 8.5 及其含有的HTTPServlet实现一个HTTP服务器
    \item 项目前后端连接的接口风格必须良好
    \item 前端不仅可以和项目三的后端工作，还可以和项目四的后端工作
\end{itemize}

\subsection{项目目标、涉众分析和范围}\label{subsection:PR3mubiao}
\subsubsection{目标}
\begin{itemize}
    \item 实现用户的登录注册
    \item 实现用户的浏览、选择商家、食品、地址管理、下单、购物车等业务和功能
\end{itemize}
\subsubsection{涉众分析}
本项目将目光聚焦于用户这一个角色身上。对于这个角色，有以下几个待解决的问题和对系统的期望：
\begin{itemize}
    \item 能够通过手机号注册账户，手机号是用户的唯一标识符
    \item 可通过手机号和密码登录系统
    \item 系统可以存储其基本信息，如地址、用户名、手机号等
    \item 能够通过一个友好美观的界面浏览商家、食品，按照自己的喜好进行选择
    \item 可以选择食品，同一种食品可以选择多个
    \item 选择的食品进入用户的购物车
    \item 能够地址管理，用户可以自行添加和删除多个地址
    \item 下单时可以选择地址列表里的一个地址，可以在下单页面进行修改
    \item 下单后订单信息可以在订单页面中查看
    \item 用户基本信息、地址、购物车和订单可以跨设备浏览，即存储在后端服务器上
\end{itemize}

\subsubsection{范围}
项目的前端能够跟项目四的后端进行直接的对接，并且可以正常的工作。

\subsection{业务流程分析}\label{subsection:PR3yewu}
本项目的主要业务有新用户的注册、用户的登录、地址管理、用户点餐等。其中用户点餐这一个业务是主要业务，
流程也是较为复杂。接下来将为每一个业务分别给出活动图。

\subsubsection{新用户注册业务}




\subsubsection{用户登录业务}


\subsubsection{用户地址管理业务}






\subsubsection{用户点餐业务}



\subsection{功能性需求} \label{subsection:PR3gongneng}

本项目的功能要求如下：
\begin{enumerate}[label={(\arabic*)}]
    \item 首页页面：本页面要求能够显示商家分类，搜索框在屏幕向下滚动时要求不会消
    失而是固定在顶部，底部菜单要求固定底部，并且点击首页可以跳转至首页页面，点击订单可
    以跳转至我的订单页面； 

    \item 商家列表页面：本页面要求能够显示后台的商家列表信息，若已登录需要能够根据用户
    的购物车在对应的商家上显示红点，并且点击商家可以跳转至对应的商家信息页面，有底部菜单；
    
    \item 商家信息页面：本页面要求能够显示后台的商家信息和食品信息，若未登录，当用户点
    击添加食品时要求能够强制跳转至登陆页面，若已登录，要求能够正常增减购物车中的食品；

    \item 登录页面：本页面要求用户输入错误的用户名或密码后点击登录会无法登录并提示错误
    ，若用户名和密码正确则能够登录并返回上一个页面，点击去注册则可以跳转至注册页面；
    
    \item 注册页面：本页面要求用户输入用户名时若用户名已存在则做出提示并无法注册，在填写完全部
    信息后点击注册可以成功注册并返回登陆页面；
    
    \item 确认订单页面：本页面要求能够显示用户的送货信息和购物车中的食品信息，用户第一
    次进入时没有默认地址并显示“请选择默认地址”，有默认地址则显示默认地址，点击地址可
    以跳转至地址管理页面，点击去支付可以跳转至在线支付页面；
    
    \item 地址管理页面：本页面要求能够显示用户存储的送货地址，可以编辑、删除和新增送货地址；
    
    \item 在线支付页面：本页面要求能够显示用户的订单信息，并且能够选择显示和隐藏，默认
    隐藏，并且要求阻止用户返回确认订单页面，防止重复添加订单
\end{enumerate}








\subsection{非功能性需求}

\subsubsection{系统架构和工具}
\begin{itemize}
    \item 要求采用MVC架构
    \item 编程语言: JAVA，HTML，Vue
    \item 数据库：MySQL
    \item 使用JDBC完成数据库事务管理
    \item 后端采用Apache Tomcat实现的Servlet实现一个HTTP服务器
\end{itemize}


\subsubsection{接口}
对接口没有硬性要求，风格良好即可。

\subsubsection{界面}
项目前端是一个网页，需要美观整洁、层次分明。需要完成首页、订单页、地址管理页、商家列表页、
食品选择页等页面，页面的配色风格保持一致，组件的放置合理，需要适配不同尺寸的手机屏幕。

\section{软件架构}
根据项目任务书的要求，本项目需要采用MVC架构，以达到前后端分离式开发的目的。
项目主要分为以下模块：
\begin{itemize} 
    \item[$\bullet$] 前端网页：用户通过网页浏览器访问网页，通过点击和输入向后端服务器发送HTTP请求。
    \item[$\bullet$] 前端控制器：负责拦截、过滤、格式化、转发请求到对应的Controller，申请处理后，将响应返回给客户。
    \item[$\bullet$] Controller层：分析HTTP请求，抽取各项参数，调用对应的Service层的接口进行进一步的处理。
    \item[$\bullet$] Service层：业务逻辑被放在这一层中，生成一个或多个Dao层对象，对数据库中的若干表进行业务相关的操作。
    \item[$\bullet$] Dao层：DAO层叫数据访问层，某个DAO一定是和数据库的某一张表一一对应的，其中封装了增删改查基本操作。
\end{itemize}
能够采用前后端分离的开发形式，进行有效的分工，提高开发效率。
经过这样的分层设计使得我们

\section{软件设计}
\subsection{后端设计}
\subsubsection{数据库设计}
数据库采用MySql数据库8.0.28版本。编写Sql脚本创建数据库和表，并导入一些数据用于测试。
使用Navicat 15 for MySql来查看和管理数据库。
基于需求分析，我们设计七个数据库表：商家表(Business)、食品表、购物车表、订单表、订单明细表、用户表、地址表。
因为数据库的设计跟教师提供的教学视频和课件里一致，所以本项目不像项目一那样给出每张表的结构。
\subsubsection{前端控制器的设计}
上文中提到，前端控制器负责拦截、过滤、格式化、转发请求到对应的Controller，申请处理
后，将响应返回给客户。
前端控制器拦截的"本机IP:8080/elm/"这样前缀的所有URL的请求。它所作的工作如下：
\begin{itemize} 
    \item[$\bullet$] 将请求的编码更改为UTF-8。
    \item[$\bullet$] 将Controller的类名和方法名解析出来。
    \item[$\bullet$] 调用上面解析出的方法。
    \item[$\bullet$] 获取上一步调用的方法的返回值，并将返回的数据封装为JSON格式。
    \item[$\bullet$] 发送响应
    \item[$\bullet$] 异常处理 
\end{itemize}
除此之外，前端控制器还需要解决跨域访问的问题。考虑到本项目在未来的一段时间内没有投入使用的可能，我们暂时允许所有域的访问。
\subsubsection{Controller层的设计} \label{subsection:PR3-controller}
前端控制器根据URL生成对应的Controller对象，并调用对应的成员方法，传递前端传来的数据参数。Controller从请求中提取出需要的参数，并通过对应的Service层接口
进行后续的操作。接下来给出每一个Controller的成员方法对应的URL的形式。

$\bullet$ BusinessController:

listBusinessByOrderTypeId: localhost:8080/elm/BusinessController/\\listBusinessByOrderTypeId?orderTypeId=1

getBusinessById: localhost:8080/elm/BusinessController/getBusinessById?\\
businessId=10001


$\bullet$ CartController

saveCart: localhost:8080/elm/CartController/saveCart?foodId=1\&businessId\\
=10001\&userId=1111111111

updateCart: localhost:8080/elm/CartController/updateCart?foodId=1\&businessId\\
=10001\&userId=1111111111\&quantity=3

removeCart: localhost:8080/elm/CartController/removeCart?foodId=1\&\\
businessId=10001\&userId=1111111111

listCart: localhost:8080/elm/CartController/listCart?businessId=10001\&\\
userId=1111111111

$\bullet$ DeliveryAddressController

getDeliveryAddressById: localhost:8080/elm/DeliveryAddressController/\\
getDeliveryAddressById?daId=1


saveDeliveryAddress: localhost:8080/elm/DeliveryAddressController/\\
saveDeliveryAddress?\&contactName=王五\&contactSex=1\&address=天津大学\\
北洋园ssslll\&userId=11111111111888\&contactTel=13813881388


removeDeliveryAddress: localhost:8080/elm/DeliveryAddressController/\\
removeDeliveryAddress?daId=3

updateDeliveryAddress: localhost:8080/elm/DeliveryAddressController/\\
updateDeliveryAddress?daId=2\&contactName=王五\&contactSex=1\&address=\\
天津大学北洋园sss\&userId=11111111111\&contactTel=13813881388



$\bullet$ FoodController

listFoodByBusinessId: localhost:8080/elm/FoodController/listFoodBy\\
BusinessId?businessId=10001

$\bullet$ OrdersController

createOrders: localhost:8080/elm/OrdersController/createOrders?\\
userId=11111111111\&businessId=10001\&daId=1\&orderTotal=32.00

getOrdersById: localhost:8080/elm/OrdersController/getOrdersById?\\
orderId=9

listOrdersByUserId: localhost:8080/elm/OrdersController/\\
listOrdersByUserId?userId=11111111111

$\bullet$ UserControler

getUserById: localhost:8080/elm/UserControler/getUserById?\\
userId=11111111111

getUserByIdByPass: localhost:8080/elm/UserControler/getUser\\
ByIdByPass?userId=11111111111\&password=123


saveUser: localhost:8080/elm/UserControler/saveUser?userId=\\
10010011\&password=123321\&userName=阿布\&userSex=1



\subsubsection{Service层设计}\label{subsection:PR3-service}

为了方便分工，Service层采用了基于接口的设计方法。负责后端的两位同学在项目初期确定好Service层接口后，一人开发Controller层及其以上的部分，另一人开发
Service层及其以下的部分。Service层一开始提供一个简单的实现，便于上层的开发和测试。等Service层有了完整的实现后，Controller层的实现版本只需进行
简单的替换即可。Service层接口和实现的设计以UML类图的形式给出。



\subsubsection{Dao层设计}
项目各部分的工作量一开始是无法确定的，下面两层的工作量可能较大。负责上层的同学如果提前完成上层代码的编写，可以帮助负责下层的同学一起实现下层。因此，
考虑到重新分工的可能性，Dao层也是采用了基于接口的设计方法。根据需要可对一个Dao层接口先提供一个简单版本的实现便于Service层的编写和测试，后续
正式版本完成后进行简单的替换。Dao层接口和实现的设计以UML类图的形式给出。



\subsubsection{后端总体设计}
接口类和类方法的UML类图在上文中已经给出，所以
所有接口类和类方法均没有给出，旨在清晰的给出后端项目的架构和类与类之间的关系。





\subsection{前端设计}
首先在制作首页时让顶部搜索块在滚动条超过12\%时变为固定位置，由此让搜索块能保持在顶部显示，
然后制作底部菜单组件，使用固定位置，并用于后续页面制作。

之后点击食品类别跳转至对应商家列表页面，跳转至页面的同时获取商家列表有关信息，并判断是否
登录，如果已登录获取用户的购物车信息并显示红点。

点击商家跳转至商家信息页面，同时获取商家信息有关信息和所属食品的有关信息，并判断是否登
录，已登录则获取用户购物车信息并显示已添加的食品数量和费用等信息；当点击添加食品时同样
也做登录验证，未登录则跳转至登陆页面，已登录则通过接口向购物车中做出对应的增删改等操作。

接下来制作登陆页面，输入用户名和密码点击登录后确认用户信息，若用户存在则将用户信息存入
setSessionStorage中并路由返回上一个页面。

若点击去注册就跳转至注册页面，当用户注册时输入了用户名就首先检查用户名是否已存在，防
止重复，当全部信息填写完点击注册时添加新用户并路由返回上一个页面。
当用户在商家信息点击去结算时跳转至确认订单页面同时获取当前商家，获取用户购物车中在当
前商家的食品列表，之后可以点击地址栏跳转至地址管理页面或点击去支付跳转至在线支付页面
同时创建订单并清除购物车。
进入地址管理页面时首先获取用户的送货地址，如果点击某个地址，则将其存储至localStorage
中作为默认送货地址，并跳转回确认订单页面；如果点击新增收货地址则跳转至添加送货地址
页面；或者点击地址右边的按钮可以修改和删除地址，修改地址需要跳转至编辑送货地址页面。

新增收货地址和编辑送货地址页面的设计基本相同，区别仅为进入编辑送货地址页面时需要获取之
前的地址信息，新增收货地址则不需要；当地址信息填写完点击保存时向发送请求添加或修改地址
信息，并跳转回地址管理页面。

进入在线支付页面时获取订单信息，并且将当前路由添加进history对象，创建popstate事件监
听history对象的变化，当URL变化时跳转至首页，防止再次回到确认订单页面反复创建订单。
最后点击底部菜单的订单可以跳转至我的订单页面，向发送请求获取订单信息，可以在该页面显示
过去创建的订单。

\section{项目团队与分工}
苟杰恺和池永杰负责项目三的前端部分，王英文博和郭岩负责后端部分，张志强负责撰写报告和部分后端。

\section{项目计划}
\begin{itemize}
   \item 2023.8.26下午14:00：根据项目任务书了解项目的需求，进行需求分析
   \item 2023.8.26下午16:00：开组会，确定程序的架构，并分工，根据分工学习相关方面的知识
   \item 2023.8.27下午14:00：前后端分别开组会确定具体代码细节要求
   \item 2023.8.28：完成项目代码的编写
   \item 2023.8.29：向老师汇报项目三
\end{itemize}

\section{项目技术}
本项目采用MVC架构，以前后端分离的形式进行开发。前端使用Vue开发。
后端是一个Tomcat服务器，它负责监听本机的8080端口，并把收到的HTTP请求传递给基于
Servlet接口编写的前端控制器。前端控制器解析URL，通过JAVA反射(Reflect)机制动态生成类对象，
把HTTP请求传递正确的Controller上。Controller做的是从HTTP请求中抽取其传递的参数，传递给Service层。
Service层通过Dao层提供的接口访问数据库，完成对应的业务逻辑。Dao层中的每一个接口都对应数据库中
的一张表，通过JDBC完成执行SQL语句完成对数据库的查询和修改。
\subsection{代码共享}
本项目由四个人开发，使用GIT做项目管理，远程仓库使用gitee。
git远程仓库的地址为：

https://github.com/M1chaelWang/project-summer-2023

前端部分的代码放在front-end目录中，后端部分的代码放在back-end目录中。

约定每次开始编码前使用git pull命令同步代码。每一次编码结束使用git commit和git push命令上传代码
至远程仓库。使用git commit命令需要添加-m选项为
该次上传添加注释，注释中必须简要说明完成了哪个部分、修复了哪个Bug等。

\subsection{前端部分}

\subsubsection{开发环境}
本项目前端部分使用HbuilderX 2.6.0做IDE，基于Vue框架进行开发，同时使用后端项目进行测试。所使用的依赖如下：
\begin{itemize}
    \item [$\bullet$] npm 8.15.0
    \item [$\bullet$] VueCli 4.0.0
\end{itemize}

\subsubsection{前端Vue项目}



Vue项目通过对应的接口向后端发送请求并获取返回的信息，相关代码类似如下：

\begin{lstlisting}[ language=Java]

//根据businessId查询商家信息
this.$axios.post('BusinessController/getBusinessById', this.$qs.stringify({
    businessId: this.businessId
})).then(response => {
    this.business = response.data;
}).catch(error => {
    console.error(error);
});

\end{lstlisting}

通过路由跳转在各个页面之间切换，相关代码如下：

\begin{lstlisting}[ language==Java]
toOrder(){
	this.$router.push({path:'/orders',query:{businessId:this.business.businessId}})
}

使用footer组件制作底部菜单，相关代码如下：

<script>
	export default {
		name: 'Footer',
		methods: {
			toIndex() {
				this.$router.push({
					path: '/index'
				});
			},
			toOrderList() {
				this.$router.push({
					path: '/orderList'
				});
			}
		}
	}
</script>
\end{lstlisting}


使用filters过滤器判断用户性别，相关代码如下：
\begin{lstlisting}[ language==Java]
filters:{
    sexFilter(value){
        return value==1?"先生":"女士";
    }
},

\end{lstlisting}



\subsection{后端部分}

\subsubsection{开发环境}
本项目后端部分使用javaSE + Servlet + MySql技术进行开发。使用Spring Tool Suite做IDE，使用MAVEN做依赖管理。
后端所用的依赖如下：

\begin{itemize}
    \item [$\bullet$] Apache Tomcat 8.5(需手动安装配置和配置)。
    \item [$\bullet$] JRE System Library[JavaSE-1.8]
    \item [$\bullet$] jackson-annotations 2.13.4
    \item [$\bullet$] jackson-core 2.13.4
    \item [$\bullet$] jackson-databind 2.13.4
    \item [$\bullet$] mysql-connector-java 8.0.30
\end{itemize}

\subsubsection{前端控制器}
上文中提到过Tomcat服务器负责监听8080端口，把收到的HTTP请求传递给基于Servlet接口编写的前端控制器。
前端控制器更改请求的字符编码为UTF-8后解析并转发请求。解析转发是基于JAVA的Refect机制实现的。该部分代码如下。

\begin{lstlisting}[ language=Java]
    // 通过Controller类全名获取此类的所有信息
    Class clazz = Class.forName("team.tjusw.elm.controller." + className);
    // 创建Controller类的对象
    // 获取Controller类对象中的方法
    Method method = clazz.getMethod(methodName, new Class[] { HttpServletRequest.class });
    // 调用上面获取的方法
    Object result = method.invoke(controller, new Object[] { request });
    // 获取向客户端响应的输出流
    out = response.getWriter();
    ObjectMapper om = new ObjectMapper();
    // 向客户端响应json数据
    out.print(om.writeValueAsString(result));
\end{lstlisting}

对于方法的返回值JSON中的ObjectMapper进行转换以后将其装载到HTTP响应之中。

\subsubsection{Controller层}
Controller层的实现较为简单，他的任务只有从HTTP请求中抽取其传递的参数，传递给Service层，向前端控制器
返回结果。下面给出一个Controller层方法的代码作为例子。

\begin{lstlisting}[ language=Java]
    public Object getOrdersById(HttpServletRequest request) throws Exception {
		Integer orderId = Integer.valueOf(request.getParameter("orderId"));
		OrdersService service = new OrdersServiceImpl();
		Orders orders = service.getOrdersById(orderId);
		return orders;
	}
\end{lstlisting}

\subsubsection{Service层和Dao层}
Service层实现了一些业务逻辑，这一层的实现就是一些常见的JAVA代码的写法，而Dao层的原理跟
项目一一样，所以在这里对这两层也不做赘述。

\section{项目部署}
\subsection{后端部署}
\subsubsection{开发环境检查}
此部署文档适用于Windows 10(11)操作系统。其他操作系统上一些
步骤可能有细微差别，具体解决方案可求助互联网。

在项目一、二的基础上，电脑上已经有了STS(编码配置为UTF-8)，
Navicat for MySQL 15，MySQL 8.0以上版本，JRE 1.8等必要环
境和配置。同时下载安装好Apache Tomcat 8.5版本。

接下来给出详细流程和步骤。
\subsubsection{数据库的准备}


确保mysql数据库root账户的密码修改为"111111"后进行后续操作
，修改过程可参考项目一的项目部署部分。
打开Navicat，如没有需从智慧树平台进行下载安装
点击左上角的“连接”按钮，点击“MySQL”，出现以下界面:
    

按照上图进行输入，然后点击“确定”。
点击上方的“新建查询”，将elm.sql里的文本全部复制进来，点击“运行”
如果出现下图所示的数据库和表项代表数据库准备完毕






\subsubsection{配置STS}

\begin{enumerate}[label={(\arabic*)}]
    \item 1.	确保已经安装tomcat并且分支已切换至PR3后打开STS，
    点击左侧的Import Project，选择generel目录下的existing 
    project into workspace。
    \item  点击Browser按钮，选择elm的目录后点击确定。接着点击”Finish”按
    钮即可完成导入
    \item 点击window-preference-server-runtime environment
    \item 如果左侧的列表里出现了tomcat 8.5 ，那么直接点击 apply and close即可
    \item 如果左侧的列表是空的，那么点击add，在文本框里输入tomcat，选择toncat 8.5
    添加进来。然后点击apply and close
    \item 点击window-show view-others-server-servers，这样就会出现server窗口
    \item 如果server窗口里没有tomcat8.5服务器（如果有则忽略此步），点击窗
    口里的蓝色字体，在文本框中输入tomcat，然后选择tomcat8.5，点击next。 接着
    将elm项目从左侧的列表中添加到右侧的列表
    \item 双击服务器，在tomcat admin port栏填入8081
    \item 启动服务器。在浏览器里输入 localhost:8080/elm/hello.然后浏览
    器会收到505，console窗口会报异常，这是正常的
\end{enumerate}
至此，已完成本项目后端的部署工作。

\subsection{前端部署}
\subsubsection{开发环境检查}
在项目二和前端环境搭建好的基础上，电脑上应该已经有
了Hbuilder X,项目三还需要有cnpm/npm，VueCli（小组统一使用4.0.0版本）。
打开cmd命令提示符，输入cnpm-v/npm-v，检查是否已有cnpm/npm，若没
有则下载node.js，然后再次输入npm-v检查，之后在环境变量中的用
户变量添加NODE\_PATH




如需安装cnpm在cmd下输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
即可全局安装cnpm，然后再次输入cnpm-v检查，或者后续搭建工程模板时
由系统自动推荐安装。
在cmd下输入vue-V检查是否已安装VueCli，若没有则
输入cnpm/npm install -g @vue/cli@4.0.0，然后再次输入vue-V检查。

\subsubsection{搭建Vue工程总体框架}
接下来搭建VueCli工程模板，在工作目录打开
cmd，输入vue create elmclient，选
择Manually select features预设模板，必
要选取Babel，Router模块，选择Y使用history形式
路由，选择in package.json将依赖文件放在package.json中，是否当
当前选择保存以备下次使用任选，之后输入cd elmclien进入工程，输
入npm run serve启动工程，在浏览器中输入http://localhost:8080测试。


\subsubsection{添加其它依赖及配置文件}
首先在cmd下输入
cnpm/npm install font-awesome --save cnpm/npm install axios --save cnpm/npm install qs --save添加font-awesome与axios依赖。
根据教程添加图片至src/assets中。添加common.js，vue.config.js，main.js，App.vue，index.js等文件。


















